<template>
	<view class="box">
		<view class="content">
			<view class="content-left">
				<view class="portrait"></view>
			</view>
			<view class="content-right">
				<view>
					<text>预约挂号成功</text>
					<view class="state"></view>
				</view>
				<text>您已成功挂号心血管内科 刘生医生，请于2020-12-30 09:10准时就诊。</text>
			</view>
		</view>
		<view class="details">
			<view>
				<text>查看详情</text>
				<view class="iconfont icon-xiangyou1"></view>
			</view>
		</view>
	</view>
	<view class="box">
		<view class="content">
			<view class="content-left">
				<view class="portrait"></view>
			</view>
			<view class="content-right">
				<view>
					<text>预约挂号成功</text>
					<view class="state"></view>
				</view>
				<text>您已成功挂号心血管内科 刘生医生，请于2020-12-30 09:10准时就诊。</text>
			</view>
		</view>
		<view class="details">
			<view>
				<text>查看详情</text>
				<view class="iconfont icon-xiangyou1"></view>
			</view>
		</view>
	</view>
	<view class="box">
		<view class="content">
			<view class="content-left">
				<view class="portrait"></view>
			</view>
			<view class="content-right">
				<view>
					<text>预约挂号成功</text>
					<view class="state"></view>
				</view>
				<text>您已成功挂号心血管内科 刘生医生，请于2020-12-30 09:10准时就诊。</text>
			</view>
		</view>
		<view class="details">
			<view>
				<text>查看详情</text>
				<view class="iconfont icon-xiangyou1"></view>
			</view>
		</view>
	</view>
	<view class="footer"></view>
</template>

<script>
</script>

<style scoped lang="less">
.box{
	width: 750rpx;
	height: 294rpx;
	border-bottom: 1px solid #f6f6f7;
	.content{
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.content-left{
			width: 140rpx;
			height: 208rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.portrait{
				width: 82rpx;
				height: 82rpx;
			border-radius: 50%;
			background-color: #e4f0ff;	
			}
		}
		.content-right{
			width: 610rpx;
			height: 208rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-bottom: 1px solid #f6f6f7;
			.state{
				width: 22rpx;
				height: 22rpx;
				background-color: #f46566;
				border-radius: 50%;
				margin-right: 40rpx;
			}
		}
		.content-right view:nth-child(1){
			width: 610rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.content-right text:nth-child(2){
			margin: 20rpx 0 0 0 ;
			line-height: 40rpx;
			font-size: 24rpx;
			color: #adaeae;
		}
	}
	.details{
		width: 750rpx;
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.iconfont{
			color: #d7d7d7;
		}
		
	}
	.details text{
		font-size: 24rpx;
	}
	.details view:nth-child(1){
		display: flex;
		align-items: center;
		margin-right: 40rpx;
	}
	.footer{
		width: 750rpx;
		height: 200rpx;
	}
}
</style>
